<template>
  <!-- #region template -->
  <BListGroup>
    <BListGroupItem
      href="#list-group-custom"
      active
      class="flex-column align-items-start"
    >
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List Group item heading</h5>
        <small>3 days ago</small>
      </div>
      <p class="mb-1">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.
      </p>
      <small>Donec id elit non mi porta.</small>
    </BListGroupItem>
    <BListGroupItem
      href="#list-group-custom"
      class="flex-column align-items-start"
    >
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List Group item heading</h5>
        <small class="text-body-secondary">3 days ago</small>
      </div>
      <p class="mb-1">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.
      </p>
      <small class="text-body-secondary">Donec id elit non mi porta.</small>
    </BListGroupItem>
    <BListGroupItem
      href="#list-group-custom"
      disabled
      class="flex-column align-items-start"
    >
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Disabled List Group item</h5>
        <small class="text-body-secondary">3 days ago</small>
      </div>
      <p class="mb-1">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.
      </p>
      <small class="text-body-secondary">Donec id elit non mi porta.</small>
    </BListGroupItem>
  </BListGroup>
  <!-- #endregion template -->
</template>
